<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <link rel="stylesheet" href="./tab.css">
     </head>
    <body>
        <div class="box">
            <ul>
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
            </ul>
            <ol>
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
            </ol>
        </div>

        <div class="box box2">
            <ul>
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
            <ol>
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ol>
        </div>

        <div class="box box3">
            <ul>
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
            <ol>
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ol>
        </div>

        <script src="./tab.js"></script>

        <script>
            const box = document.querySelector(".box");
            const t1 = new Tabs(box);
            t1.bindEvent();

            const box2 = document.querySelector(".box2");
            const t2 = new Tabs(box2);
            t2.bindEvent();

            const box3 = document.querySelector(".box3");
            const t3 = new Tabs(box3);
            t3.bindEvent();

            // const btns = box.querySelectorAll("ul > li");
            // const tabs = box.querySelectorAll("ol > li");

            // for (var i = 0; i < btns.length; i++) {
            //     btns[i].setAttribute("index", i);

            //     btns[i].onclick = function () {                 
            //         for (var j = 0; j < btns.length; j++) {
            //             btns[j].className = "";
            //             tabs[j].className = "";
            //         }

            //         this.className = "active";
            //         tabs[this.getAttribute("index")].className = "active";
            //     };
            // }

            /*
      {
        box:
        btns:
        tabs:
        __proto__: {
          clickEvent: function () {
            遍历 btns
             操作每一个没有类名
             操作每一个 tabs 里面的东西也没有类名

             给当前这个btn 添加类名
             给索引对应的和子添加类名
          }
        }
      }
    */
        </script>
    </body>
</html>
